<template>
    <div class="process-designer">
        <!-- 流程画布 -->
        <div id="flow-container" class="flow-canvas"></div>

        <!-- 右侧属性面板 -->
        <div class="property-panel" v-if="selectedNode">
            <h3>节点配置</h3>
            <el-form label-width="80px">
                <el-form-item label="节点名称">
                    <el-input v-model="selectedNode.text.value" />
                </el-form-item>

                <el-form-item label="审批人" v-if="selectedNode.type === 'approval'">
                    <el-select v-model="selectedNode.properties.assignee">
                        <el-option label="指定成员" value="user" />
                        <el-option label="主管" value="leader" />
                    </el-select>
                </el-form-item>

                <el-form-item label="条件" v-if="selectedNode.type === 'condition'">
                    <el-input type="textarea" v-model="selectedNode.properties.condition" />
                </el-form-item>
            </el-form>
        </div>

        <!-- 下载 -->
        <downloadUploadXml :lf="lf"></downloadUploadXml>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/index.css'
import '@logicflow/extension/lib/style/index.css'

import downloadUploadXml from './download-upload-xml.vue'

import {
    BpmnElement,
    BpmnXmlAdapter,
    Control,
    Menu,
    SelectionSelect,
    DndPanel,
} from '@logicflow/extension'


import { DESIGN_ITEM } from './patternItems'

let lf: LogicFlow
const selectedNode = ref<any>(null)


onMounted(() => {
    nextTick(() => {
        initFlowChart()
    })
})

function initFlowChart() {
    lf = new LogicFlow({
        container: document.querySelector('#flow-container')!,
        stopZoomGraph: true,
        metaKeyMultipleSelected: true,
        grid: false,
        keyboard: {
            enabled: true,
        },
        snapline: true,
        plugins: [
            BpmnElement,
            BpmnXmlAdapter,
            Control,
            Menu,
            SelectionSelect,
            DndPanel,
        ],
    });

    DESIGN_ITEM.shift();
    DESIGN_ITEM.unshift({
        label: '选区',
        icon: '',
        callback: () => {
            lf.openSelectionSelect();
            lf.once('selection:selected', () => {
                lf.closeSelectionSelect();
            });
        },
    })

    lf.setPatternItems(DESIGN_ITEM);

    lf.on('node:click', ({ data }) => {
        selectedNode.value = data
    })


    lf.render({})
}

</script>

<style lang="less">
.process-designer {
    display: flex;
    height: 100%;
    box-sizing: border-box;

    .tool-panel {
        width: 200px;
        padding: 10px;
        background: #fff;
        border-right: 1px solid #e4e7ed;

        .node-item {
            padding: 8px;
            margin: 5px 0;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            cursor: move;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 4px;

            &:hover {
                border-color: #409EFF;
                color: #409EFF;
            }
        }
    }

    .flow-canvas {
        flex: 1;
        background: #f5f7fa;
        overflow: hidden;

        .lf-grid {
            background-image: radial-gradient(#ccc 1px, transparent 0);
            background-size: 20px 20px;
        }
    }

    .property-panel {
        width: 300px;
        padding: 20px;
        background: #fff;
        border-left: 1px solid #e4e7ed;
    }
}

.lf-dnd-shape {
    width: 36px;
    height: 36px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: grab;
    opacity: .99;
}
</style>